<template>
  <view class="content">

    <!-- 顶部搜索 -->
    <view class="index_head">
      <uni-icons type="search" size="17"></uni-icons>
      <input class="head_input" auto-focus placeholder="输入关键词搜索商品" />
      <cover-image class="head_img" src="../../static/img/tx.jpg"></cover-image>
    </view>

    <!-- 产品分类跳转 -->
    <view class="product_sort">
      <navigator url="../login/login.vue">
        <view class="product_sort_left">
          <text> DIV产品</text>
          <button>更多</button>
          <view class="sort_left_icon"></view>
        </view>
      </navigator>

      <view class="product_sort_right">
        <view class="baihuo">
          <text>百货</text>
          <view class="baihuo_icon"></view>
        </view>
        <view class="ershou">
          <text>二手市场</text>
          <view class="ershou_icon"></view>
        </view>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="product_lists">
      <view class="product_list" v-for="item in 9">
        <cover-image src="../../static/img/tx.jpg"></cover-image>
        <view class="product_list_title">原神周边喜茶联动甘雨申鹤杯222套立牌3333444夹透扇...</view>
        <view class="product_price">
          <text>￥</text>
          100
        </view>
        <view class="guanwang">开心网官方</view>
      </view>

    </view>

  </view>
</template>

<script>
  import {
    request
  } from "@/request/index.js"
  import regeneratorRuntime from '@/lib/runtime/runtime';
  import tabBar from '@/components/tabBar/tabBar.vue'
  export default {

    data() {
      return {
        title: '首页',
        wubox: [{
            name: '关于夏耦合'
          }, {
            name: '新闻资讯'
          },
          {
            name: '公益项目'
          }, {
            name: '加入我们'
          }, {
            name: '联系我们'
          },
        ],
        background: ['color1', 'color2', 'color3'],
        indicatorDots: false,
        autoplay: true,
        interval: 2000,
        duration: 500,
        qhindex: 0,
        banner: [],
        taskList: [],
        caseNav: [],
        caseList: [],
        newlist: [],
      }
    },
    components: {

    },
    onLoad() {
      // this.initPageDate()
      // this.GetCaseList()
    },
    methods: {

    }

    //   methods: {

    //     // 时间判断
    //     GetStatus(item) {

    //       var CurrentTime = Math.round(new Date());
    //       var StartTime = Math.round(new Date(item.starttime));
    //       var EndTime = Math.round(new Date(item.endtime));
    //       if (CurrentTime > StartTime) {
    //         if (CurrentTime < EndTime) {
    //           return "进行中"
    //         } else {
    //           return "已结束"
    //         }
    //       } else {
    //         return "未开始"
    //       }
    //     },

    //     // 项目
    //     async GetCaseList() {
    //       var res3 = await request({
    //         url: "GetCaseList?catid=" + this.qhindex + "&page=1&num=5",
    //       });
    //       if (res3.code == 0) {
    //         this.caseList = res3.data
    //       }

    //     },

    //     // 基本信息
    //     async initPageDate() {

    //       // banner
    //       var res1 = await request({
    //         url: "GetConfig",
    //         data: {
    //           title: 'wapbanner'
    //         }
    //       });
    //       if (res1.code == 0) {
    //         this.banner = res1.data
    //         console.log(res1.data)
    //       }

    //       // 活动
    //       let data = {
    //         catgoryindex: 0,
    //         status: 0,
    //         cityindex: 0,
    //         page: 1,
    //         num: 5,
    //       }

    //       var res2 = await request({
    //         url: "GetTaskList",
    //         data
    //       });
    //       if (res2.code == 0) {
    //         this.taskList = res2.data
    //       }


    //       // 项目分类
    //       var res3 = await request({
    //         url: "GetClassification?id=74",
    //       });
    //       if (res3.code == 0) {
    //         this.caseNav = res3.data
    //       }

    //       // 新闻
    //       let datas = {
    //         catid: 73,
    //         page: 1,
    //         num: 5,
    //       }

    //       var res4 = await request({
    //         url: "GetArticleList",
    //         data: datas
    //       });
    //       if (res4.code == 0) {
    //         this.newlist = res4.data
    //       }



    //     },



    //     getqh(index, id) {
    //       this.qhindex = id
    //       this.GetCaseList()
    //     },
    //     getgd() {
    //       uni.navigateTo({
    //         url: "/pages/index/activitylist"
    //       })
    //     },
    //     godetail() {
    //       uni.navigateTo({
    //         url: '/pages/index/activityDetails'
    //       })
    //     },
    //     gowelfare() {
    //       uni.switchTab({
    //         url: '/pages/welfare/welfare'
    //       })
    //     },
    //     gowelfared() {
    //       uni.navigateTo({
    //         url: '/pages/welfare/welfareDetails'
    //       })
    //     },
    //     gonews() {
    //       uni.navigateTo({
    //         url: '/pages/index/news'
    //       })
    //     },
    //     gonewslist() {
    //       uni.switchTab({
    //         url: '/pages/index/newslist'
    //       })
    //     },
    //     gonei(index) {
    //       if (index == 0) {
    //         uni.navigateTo({
    //           url: '/pages/index/about'
    //         })
    //       }
    //       if (index == 3) {
    //         uni.navigateTo({
    //           url: '/pages/index/Joinus'
    //         })
    //       }
    //     },
    //     changeIndicatorDots(e) {
    //       this.indicatorDots = !this.indicatorDots
    //     },
    //     changeAutoplay(e) {
    //       this.autoplay = !this.autoplay
    //     },
    //     intervalChange(e) {
    //       this.interval = e.target.value
    //     },
    //     durationChange(e) {
    //       this.duration = e.target.value
    //     }
    //   }
  }
</script>

<style scoped lang="scss">
  .content {
    position: relative;
    background: #F4F4F4;
  }

  // 头部搜索
  .index_head {
    position: relative;
    // width: 750rpx;
    height: 386rpx;
    background: #A1C1CD;
    padding: 20rpx 32rpx 0;

    uni-icons {
      position: absolute;
      left: 60rpx;
      top: 37rpx;
    }

    .head_input {
      // width: 584rpx;
      height: 72rpx;
      background: #F4F4F4;
      border-radius: 36rpx 36rpx 36rpx 36rpx;
      padding-left: 72rpx;
      // margin-bottom: 20rpx;
    }

    .head_img {
      position: absolute;
      top: 120rpx;
      width: 686rpx;
      height: 274rpx;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      z-index: 9999;
    }
  }

  //产品分类跳转
  .product_sort {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    transform: translateY(-80rpx);
    width: 750rpx;
    height: 430rpx;
    background: #fff;
    border-radius: 40rpx 40rpx 16rpx 16rpx;
    padding-bottom: 44rpx;

    .product_sort_left {
      position: relative;
      margin-right: 22rpx;
      padding: 44rpx 30rpx 30rpx;
      width: 332rpx;
      height: 260rpx;
      background-image: url('../../static/imgs/Frame 1411.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;

      text {
        font-size: 32rpx;
        font-weight: bold;
        color: #2754D0;
        line-height: 32rpx;
      }

      button {
        margin-top: 18rpx;
        transform: translateX(-80rpx);
        font-size: 24rpx;
        width: 100rpx;
        height: 40rpx;
        line-height: 40rpx;
        color: #3369FF;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(30, 71, 186, 0.15);
        border-radius: 22rpx 22rpx 22rpx 22rpx;
      }

      .sort_left_icon {
        position: absolute;
        right: 40rpx;
        bottom: 40rpx;
        width: 120rpx;
        height: 120rpx;
        background-image: url('../../static/imgs/Group 4.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
      }
    }

    .product_sort_right {

      .baihuo,
      .ershou {
        position: relative;
        width: 332rpx;
        height: 120rpx;
        background-image: url('../../static/imgs/Frame 1412.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        padding: 44rpx 30rpx;

        text {
          font-size: 32rpx;
          font-weight: bold;
          color: #11AC96;
        }

        .baihuo_icon,
        .ershou_icon {
          position: absolute;
          right: 20rpx;
          bottom: 20rpx;
          width: 96rpx;
          height: 80rpx;
          background-image: url('../../static/imgs/Group 6.png');
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
        }
      }

      .ershou {
        background-image: url('../../static/imgs/Frame 1413.png');
        margin-top: 20rpx;

        text {
          color: #DA692D;
        }

        .ershou_icon {
          background-image: url('../../static/imgs/Group 7.png');
        }
      }
    }
  }

  // 商品列表
  .product_lists {
    transform: translateY(-50rpx);
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    padding: 0 15rpx;

    .product_list {
      background-color: #fff;
      margin-left: 22rpx;
      margin-bottom: 20rpx;
      width: 332rpx;
      height: 544rpx;
      border-radius: 12rpx 12rpx 0rpx 0rpx;
      opacity: 1;

      cover-image {
        height: 332rpx;
        border-radius: 12rpx 12rpx 0rpx 0rpx;
      }

      .product_list_title {
        margin: 20rpx 20rpx 30rpx;
        height: 68rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
      }

      .product_price {
        margin: 0 20rpx;
        width: 72rpx;
        height: 34rpx;
        font-size: 40rpx;
        font-weight: bold;
        color: #FA4343;
        line-height: 40rpx;

        text {
          width: 28rpx;
          height: 24rpx;
          font-size: 28rpx;
        }
      }

      .guanwang {
        margin: 20rpx 0 0 20rpx;
        width: 120rpx;
        height: 24rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #999999;
        line-height: 24rpx;
      }
    }
  }
</style>